<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" type="image/x-icon" href="/sp/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/sp/favicon.ico" />

<title>学员注册</title>
<link href="__PUBLIC__/home/css/sishuindex.css" rel="stylesheet" type="text/css" media="all"/>
<link href="__PUBLIC__/home/css/header2_9.css" rel="stylesheet" type="text/css" media="all"/>

<link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="__PUBLIC__/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/jquery.min.js"></script>

<style type="text/css">
    .posa{position: absolute;}
    #txt_mobile{display: inline-block;float: left;margin-right: 20px;}
    .okcoded{position: relative;}
    .layout-center{width:720px;position:relative;padding:60px;}
    .retrieve-container h3{font-size:18px; padding-bottom: 56px; padding-top: 20px;position:relative;left:86px;display: inline-block;}
    .retrieve-container h3>span{font-weight: bold; font-size: 32px; color: #30c76c; padding-right: 20px;}
    .copyright{ width: 100%; text-align: center; color:#8c8c8c; font-size: 16px; margin-bottom: 14px; }
    .copyright span{ color:#c5c5c5;  padding:0 10px; }
    .no-code-tips,.re_yzm{display:none;}
    .no-code-tips{padding-left:10px;color:#000;text-decoration:underline;height: 40px;line-height: 40px;}
    .re_yzm img,.re_yzm a{float:left;display:inline-block;}
    .re_yzm img{cursor: pointer;width:100px;}
    .re_yzm a{height:40px;line-height:40px;margin-left:45px;color:#000;}
    .nocode_txt{display:none;text-align:left;}
    .nocode_txt span{color:red;}
    .clear{clear:both;}
    input::-ms-clear{display:none;}
    .retrieve-container h3 span.reg_new_tps{font-size: 14px;font-weight: normal;position: absolute;white-space: nowrap;background-color: rgba(255,244,206,1);background-color: rgb(255, 244,206)\9;color: #000;padding:5px 5px 5px 20px;border-radius: 5px;top: 75px;right: 30px;box-shadow: 0 0 3px rgba(255,244,206,1);line-height: 20px;}
    span.reg_new_tps:before{content: '';display: block;width: 0;height: 0;position: absolute;border-width: 15px;border-style: solid;border-color: transparent transparent rgba(255, 244,206, 0.77)  transparent;border-color: transparent transparent rgb(255, 244, 206)\9  transparent;top: -24px;left: 20px;}
    .retrieve-container h3 span.reg_new_tps span.given{display:inline-block;background:url(/img/parent/given.png) no-repeat 0px 3px;margin-right:5px;}
    .psw_tips{width:180px;position:absolute;bottom:195px;left:330px;background-color:#878787;border-radius:5px;
        -msborder-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;}
    .psw_tips > p{color:#fff;font-size:16px;padding-top:5px;padding:4px;}
    .tips_tangle{border:7px solid #878787;border-color:transparent transparent #878787 transparent;position:absolute;bottom:225px;left:350px;height:0px;width:0px;border-style:dashed dashed solid dashed;display:none;}
    .voice_code{display: none;color: #000;height:50px;line-height:50px;position: absolute;top:45px;}
    .voice_code span{width: 220px;text-align: right;display: inline-block;float: left;color:#f97110;padding-right:24px;line-height:5;}
    .yy_btn{float:left;margin-top:10px;color: #fff;font-family: "Microsoft YaHei";cursor: pointer;height: 40px;line-height: 38px;width: 135px;display: inline-block;background-color: #ff9700;border: 1px solid #c26009;font-size: 16px;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;}
    .yy_ceng{background: #000;opacity: .7;width: 100%; height:100%;position: fixed;top:0;z-index: 99;display: none;}
    .or_yyNor{width: 580px;height: 310px;background: #fff;border-radius: 10px;text-align: center;padding: 20px 40px;position: absolute;top:30%;z-index: 100;left:32%;display: none;}
    .or_yyNor h2{font-size: 36px;padding: 20px 0;}
    .or_yyNor p{font-size: 14px;margin-bottom: 30px;}
    .or_yyNor .toVoice{color: #fff;font-family: "Microsoft YaHei";cursor: pointer;display: inline-block;background-color: #ff9900;font-size: 16px;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;border: none;border-radius:10px ;padding: 10px 50px;}
    .or_yyNor .noGo{display: block;margin-top: 20px;color: #008be7;text-decoration: none;}
    .okcoded .inp{width:200px;display:inline-block;}
    .inp{width:200px;}
    .yzm{position:relative;}
    .yzm .btn-blue{float: left;width: 134px;color: #fff;font-family: "Microsoft YaHei";cursor: pointer;height: 40px;line-height: 38px;display:inline-block;background-color: #89cff0;border: 1px solid #89cff0;font-size: 16px;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;margin-left:20px;}
    .yzmarea img{width:100px;height:40px;margin-left:20px;}
    .yzmarea a{font-size:14px;color:#5aabe2;border-bottom:1px solid #5aabe2;text-decoration:none;padding-bottom:1px;margin-left:10px;vertical-align:super;}
    .yzmarea a:hover{border-bottom:none;}
    .input-msg ul {
    border: 1px solid #4d8de7;
    border-top: none;
    cursor: pointer;
    overflow-y: scroll;
    background-color: #fff;
    z-index: 2;
    position: absolute;
    width: 200px;
    height: 155px;
    left: 208.5px;
}
</style>

</head>
<body>
<!--网站头部-->
    <div class="header clear-fx retrieve">
        <div class="logolay">
            <a href="{:U('index/index',array('newcity'=>$city))}"><img src="__PUBLIC__/home/images/logo2_9.png" alt="365hls-logo"></a>
        </div>
        <div class="navlay">
            <ul>
                <li class="retrieve-nav" style="font-size:14px;">
                <a href="{:U('user/login',array('newcity'=>$city))}" style="color:#747474;">已有账户，<span style="color:#30363a;">马上登录</span></a>|
                <a href="{:U('index/index',array('newcity'=>$city))}" title="返回首页" style="color:#747474;">返回首页</a></li>
            </ul>
        </div>
    </div>
<!--网站头部 END-->
    <div class="retrieve-container">
        <div class="layout-center">
        <div class="psw_tips"><p>密码不能超过24位哦~</p></div>
        <div class="tips_tangle"></div>
        <h3><span>学员注册</span>最适合的教学方式给您<!--<span class="reg_new_tps"><span class="given">　</span>新注册的学员免费获得100元学习券，支付订单立减100元！</span>--></h3>
            <form class="subform layui-form" method="post">
                <div class="form-gp">
                    <label style="font-size:16px; margin-top:2px">手机号：</label>
                    <div class="input-msg">
                        <div class="okcoded">
                            <input required  lay-verify="required" name="phone" class="inp" placeholder="请输入手机号作为登录账号" type="text">
                            <div class="clear"></div></div>
                            <span class="msg-inp">填写成功</span>
                    </div>
                </div>
                  <div class="form-gp">
                    <label style="font-size:16px; margin-top:2px">验证码：</label>
                    <div class="input-msg">
                        <div class="yzmarea">
                            <input required  lay-verify="required" class="inp fl" name="vcode" autocomplete="off" maxlength="4" placeholder="请输入右侧的图形码" type="text"><img style="cursor:pointer;" src="{:U('user/vcode')}" onclick="this.src='{:U('user/vcode')}?'+Math.random();" title="看不清楚?点击刷新验证码?">
                            <div class="clear"></div>
                        </div>
                        <span class="msg-inp">填写成功</span>
                    </div>
                </div>

                <div class="form-gp" style="margin-bottom: 0;">
                    <label style="font-size:16px; margin-top:2px">短信码：</label>
                    <div class="input-msg">
                        <div class="yzm">
                            <input name="send_to" required  lay-verify="required" autocomplete="off" placeholder="请输入短信码" class="inp no-code fl" type="text">
                        </div>
                        <input class="btn-blue fl" id="getcodes" value="获取短信验证码" onclick="get_mobile_valid();" type="button" style="background-color: #30c76c;border: 0px;margin-left: 20px;width: 100px;height: 38px;border-radius: 10px;">
                    </div>
                    <span class="msg-inp yzm_regexp">填写成功</span>
                </div>
                <div style="padding-left:147px;height: 30px;line-height: 5px;color: #f90;font-size:12px;">温馨提示：短信码有效期为2分钟，请及时填写</div>
                
                <div class="form-gp mt60" style=" margin-bottom:0; ">
                    <label style="font-size:16px; margin-top:2px">密&nbsp;&nbsp;&nbsp;码：</label>
                    <div class="input-msg">
                        <div><input required  lay-verify="required" name="password" placeholder="请输入6位以上密码" class="inp" autocomplete="off" type="password"></div>
                        <span class="msg-inp">填写成功</span>
                    </div>
                </div>
                <div class="form-gp" style="margin-top:20px;">
                    <label style="font-size:16px; margin-top:2px；float:left;">上课城市：</label>
                    <div class="input-msg" style="width: 200px;">
                    <select name="city" id="txt_city" >
                        <?php foreach ($citys as $c) { ?>
                          <option value="{$c.city_name}">{$c.city_name}</option>
                        <?php } ?>                                          
                    </select>
                    </div>
                </div>
                <!-- <div class="form-gp" style="margin-bottom: 0px;">
                    <label style="font-size:16px; margin-top:2px"><span style="font-size:8px;color:red;">(选填项)</span>推荐手机：</label>
                    <div class="input-msg">
                        <div class="okcoded">
                            <input name="tjr_phone" class="inp" placeholder="请输入推荐人手机号" type="text">
                            <span style="font-size: 8px;color: #f90;margin-left: 10px;">活动期间：被推荐人可以获得50元红包</span>
                        </div>
                    </div>
                </div> -->
                <div class="form-gp">
                    <label></label>
                    <div class="input-msg">
                        <div>
                        <label style="width:auto; font-size:12px; font-weight:normal;cursor:pointer;margin:30px 0 0 0;">
                            <input checked="checked" type="checkbox" disabled="disabled">我已阅读并遵守<a href="{:U('notice/jz_xieyi')}" style="text-decoration: underline;">"老师上门"服务协议</a>
                        </label>
                        </div>
                        <span id="msg-inp-agree" class="msg-inp"></span>
                    </div>
                </div>
                <button class="btn-orig o-k" lay-submit lay-filter="*" style="background-color: #30c76c;border-bottom: 0px;margin-left: 170px;">确定</button>
            </form>
            <p style="display:none; width:240px; text-align:center;" class="errorMSG" id="errorMSG"></p>
                    </div>
    </div>
    
<!-- 尾部 -->
<include file="Public:fooder" />

<script type="text/javascript">
    layui.use(['form','layer'], function(){
      var layer = layui.layer
      ,form = layui.form();
      //layer.msg('Hello World');

    form.on('submit(*)', function(data){
      console.log(data);
      // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
       console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    $.ajax({
        url: "{:U('user/jz_zhuce')}",//请求地址
        type: "post",//请求方式
        dataType: "json",//返回数据类型
        data: data.field,//发送的参数
        })
        .done(function(response) {
              if(response.error==0){
                 layer.msg(response.info ,{icon:5});

              }else{
                 layer.msg(response.info ,{icon:6});
                 location.href = "{:U('user/login')}"

              }
          })
        .fail(function() {
            alert("ajxs交互失败");
        })  

      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });   
    });

    /*发送短信验证码*/
    function get_mobile_valid(){
        layer.confirm('确认要发送吗？',function(index){
            //发异步删除数据
            var to = $('input[name="phone"]').val();
            $.ajax({
                url: "{:U('user/send_to')}",//请求地址
                type: "post",//请求方式
                dataType: "json",//返回数据类型
                data: {to:to},//发送的参数
                })
                .done(function(response) {
                      if(response.error==1){
                        layer.msg(response.info ,{icon:6});
                      }else{
                        layer.msg(response.info ,{icon:5});
                      }
                  })
                .fail(function() {
                    alert("ajxs交互失败");
                })  
            return false;
        });
    }
</script>
</body></html> 